<!-- <script setup lang="ts">
import { onMounted,ref } from 'vue'
import * as Cesium from 'cesium'
import { initCesium } from '@utils/cesumUtil'
import { ipcRenderer } from 'electron'
let viewer:Cesium.Viewer|undefined = undefined

 
const {nodeVersion, chromeVersion, electronVersion, ping, onFileDragStart,
  setTitle, openFile, onUpdateCounter, onDarkModeSystem, onDarkModeToggle,
  updateProcessBar
} = window.electronApi

const versions = ref([
  {name: 'node version', version: nodeVersion()},
  {name: 'chrome version', version: chromeVersion()},
  {name: 'electron version', version: electronVersion()}
])
const pingRes = ref('')
const appTitle = ref('')
const filePath = ref('')
const counterValue = ref<number>(0)

onMounted(async () => {
  viewer = await initCesium()
})
const handlePing = async () => {
  pingRes.value = await ping()
}
const handleSetTitle = () => {
  if (!appTitle.value) return
  setTitle(appTitle.value)
}

const handleFileOpen = async () => {
  const result = await openFile()
  filePath.value = result
}

onUpdateCounter((event:any, value:number) => {
  counterValue.value += value
  event.sender.send('counter-value', counterValue.value)
})

// MessagePort工作
const {port1, port2} = new MessageChannel()

port2.postMessage({answer: 24})

// ipcRenderer.postMessage('port', null, [port1])

const darkMode = ref('system')

const handleDarkModeToggle = async () => {
  const isDarkMode = await onDarkModeToggle()
  if (isDarkMode) {
    darkMode.value = 'dark'
  } else {
    darkMode.value = 'light'
  }
}
const handleDarkModeSystem = () => {
  onDarkModeSystem()
  darkMode.value = 'system'
}

// 原生文件拖 & 放

const handleDragStart = (fileName:string) => {
  onFileDragStart(fileName)
}
// 进度条
const processNum = ref(0)

const handleUpdateProcess = () => {
  let timer:NodeJS.Timer|undefined = undefined
  if (!timer) {
    timer = setInterval(() => {
      processNum.value += 1
      updateProcessBar(processNum.value / 100)
      if (processNum.value == 100) {
        clearInterval(timer)
        processNum.value = 0
      }
    }, 500)
  }
} 

</script> 

<template>
  <div class="container">
    <div id="cesiumViewer"></div>
    <div id="credit"></div>
    <div class="section">
      <div class="drag-zone">在此区域内长按拖拽应用程序</div>
      <template v-for="({name, version}, index) in versions" :key="index">
        <p>{{name}}--{{version}}</p>
      </template>
      <p>
        <button @click="handlePing">ping操作</button>
        <strong>{{pingRes}}</strong>
      </p>
      <p>
      <input type="text" v-model="appTitle">
      <button @click="handleSetTitle">设置应用程序标题</button>
      </p>
      <p>
        <button @click="handleFileOpen">打开文件</button>
        <strong>{{filePath}}</strong>
      </p>
      <p>
        counter value: <strong>{{counterValue}}</strong>
      </p>
      <p>
        系统模式切换:<strong> {{darkMode}}</strong>
        <button @click="handleDarkModeToggle">切换黑暗模式</button>
        <button @click="handleDarkModeSystem">重置默认模式</button>
      </p>
      <p>
        <strong>原生文件拖 & 放</strong>
        <div class="drag-div" @dragstart="handleDragStart('drag_drop_file1.txt')" draggable="true">拖拽drag_drop_file1.txt</div>
        <div class="drag-div" @dragstart="handleDragStart('drag_drop_file2.txt')" draggable="true">拖拽drag_drop_file2</div>
      </p>
      <p>
        <h3>进度条</h3>
        <input type="number" readonly v-model="processNum" max="100" min="0">
        <button @click="handleUpdateProcess">更新进度</button>
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .container{
    width: 100%;
    height: 100vh;
    position: relative;
    #credit{
      display: none;
    }
    #cesiumViewer{
      width: 100%;
      height: 100%;
    }
    .section{
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      box-sizing: border-box;
      color: #fff;
      background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0));
      .drag-zone{
        width: 100%;
        height: 40px;
        background-color: #2f3241;
        -webkit-app-region: drag;
        user-select: none;
        color: #74b1be;
        line-height: 40px;
        text-align: center;
      }
      .drag-div{
        width: 200px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        margin: 10px 0;
        border: 1px solid #fff;
        cursor: move;
        border-radius: 4px
      }
    }
  }
</style> -->
